<script lang="ts" setup>
import type { MatchPreviewData } from './types.ts';
import HistoryDetail from '@/components/historyRecord/detailDialog.vue';
import LcuImage from '@/components/lcuImage.vue'
import { getMatchData } from '@/LcuApi/formatMatchData'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n';

// prop
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

// 点击事件
const emit = defineEmits(['detail'])

const matchData = ref<MatchPreviewData>({})

const { t } = useI18n()

const HistoryDetailDialog = ref(null)
function handleClick() {
  // 直接使用已声明的emit
  console.log('matchData.value', matchData.value);

  HistoryDetailDialog.value.init(matchData.value);
}

// watch
watch(
  () => props.data,
  async (newVal) => {
    matchData.value = await getMatchData(newVal)
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <div class="mini_record flex items-center cursor-pointer"
    :class="{ 'is_win': matchData.win, 'is_lose': !matchData.win }" @click="handleClick">
    <!-- 英雄头像 -->
    <div class="item_hero_icon">
      <LcuImage :id="matchData.championId" type="champion" />
    </div>
    <!-- 模式和时间 -->
    <div class="item_mode_time pl-[8px]">
      <div class="item_mode flex justify-between">
        <!-- 模式 -->
        <div class="font-bold">{{ matchData?.queueInfo?.name || t(`HistoryRecord.unknownMode`) }}</div>
        <!-- 相对时间 -->
        <div>{{ matchData?.time }}</div>
      </div>
      <div class="item_time mt-5px flex justify-between">
        <!-- 击杀/死亡/助攻 -->
        <div>{{ matchData.kills }}/{{ matchData.deaths }}/{{ matchData.assists }}</div>
        <!-- 胜负 -->
        <div>{{ t(`HistoryRecord.${matchData.win ? 'win' : 'lose'}`) }}</div>
      </div>
    </div>

    <HistoryDetail ref="HistoryDetailDialog" />
  </div>
</template>

<style lang="scss" scoped>
.mini_record {
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 2px;
  border: 1px solid transparent;

  &.is_win {
    background-color: #E8FFEA;
    border-color: #0fc6c2;
  }

  &.is_lose {
    background-color: #FFECE8;
    border-color: #F53F3F;
  }

  .item_hero_icon {
    width: 30px;
    height: 30px;
    background-color: #000;
  }

  .item_mode_time {
    width: calc(100% - 30px);
  }
}
</style>
../../LcuApi/record.js
@/LcuApi/formatMatchData.js
